<template>
  <div class="container-fluid">
    <!-- 用户文章 -->
    <div v-if="isShow" class="row default">
      <div class="col-12">
        <div class="row">
          <div class="col-6">
            <strong style="font-size: 17px">{{ title }}</strong>
          </div>

          <div class="col-6 d-flex justify-content-end">
            <span
              >最近时间排序<i
                style="font-weight: bolder"
                class="el-icon-sort"
              ></i
            ></span>
          </div>
        </div>
      </div>

      <div
        class="col-12 hover padding-20 shadow-sm"
        v-for="item in articleList"
        style="cursor: pointer"
        :key="item.id"
      >
        <div @click="read(item.id)" class="row">
          <div class="col-8">
            <strong style="font-size: 17px">{{ item.title }}</strong>
            <br />
            <span>{{
              item.content.length >= 20
                ? item.content.slice(0, 5) + "..."
                : item.content
            }}</span>
            <br />
            <span><i class="icon el-icon-view"></i></span>
            <span class="d-none d-md-inline"> 浏览 </span>
            <span> {{ item.views }} </span>

            <span><i class="icon iconfont icon-dianzan"></i></span>
            <span class="d-none d-md-inline"> 点赞 </span>
            <span> {{ item.likes }} </span>

            <span><i class="icon el-icon-chat-line-round"></i></span>
            <span class="d-none d-md-inline"> 评论 </span>
            <span> {{ item.comments }} </span>

            <span><i class="icon el-icon-star-off"></i></span>
            <span class="d-none d-md-inline"> 收藏 </span>
            <span> {{ item.collection }} </span>
          </div>

          <div class="col-4 d-flex justify-content-end">
            <el-image
              v-if="item.imgs.length !== 0"
              style="height: 80px"
              :src="item.imgs[0]"
            ></el-image>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="col-12">
      <el-empty
        :description="desc"
        :image-size="200"
        :image="require(`bodyLeftDefaultImage`)"
      ></el-empty>
    </div>
  </div>
</template>

<script>
import { fake } from "../../assets/fake";
export default {
  data() {
    return {
      title: "出错了~",
      articleList: [],
      isSelf: false,
      isShow: true,
      desc: "还在创作的路上~",
    };
  },
  methods: {
    read(articleId) {
      this.$router.push({
        name: "Article",
        query: {
          articleId: articleId,
        },
      });
    },
    flushPage() {
      let _this = this;
      let param = this.$route.query;
      let user = fake.methods.getUser(param.id);
      this.isSelf = param.id === fake.self.info.id;
      this.articleList = []
      if (param.type === "1") {
        this.title = this.isSelf
          ? "我的文章"
          : user.info.sex === "男"
          ? "他" + "的文章"
          : "她" + "的文章";
        this.articleList = fake.methods.getArticleByWriter(param.id);
        if (user.set.showArticle) {
          if (this.articleList.length !== 0) {
            this.isShow = true;
          } else {
            this.isShow = false;
            this.desc = this.isSelf
              ? "你还没有发布文章哦~"
              : "作者还在创作的路上~";
          }
        } else {
          if (this.isSelf) {
            if (this.articleList.length !== 0) {
              this.isShow = true;
            } else {
              this.isShow = false;
              this.desc = "你的收藏文章空空如也~";
            }
          } else {
            this.isShow = false;
            this.desc = "用户设置了隐私，无法查看" + this.title;
          }
        }
      } else {
        this.title = this.isSelf
          ? "我的收藏"
          : user.info.sex === "男"
          ? "他" + "的收藏"
          : "她" + "的收藏";
        user.line.forEach((value) => {
          if (value.content === "收藏") {
            value.list.forEach((id) => {
              _this.articleList.push(fake.methods.getArticleById(id));
            });
          }
        });
        if (user.set.showLikes) {
          if (this.articleList.length !== 0) {
            this.isShow = true;
          } else {
            this.isShow = false;
            this.desc = this.isSelf ? "你的收藏空空如也~" : "收藏夹里是空的";
          }
        } else {
          if (this.isSelf) {
            if (this.articleList.length !== 0) {
              this.isShow = true;
            } else {
              this.isShow = false;
              this.desc = "你的收藏空空如也~";
            }
          } else {
            this.isShow = false;
            this.desc = "用户设置了隐私，无法查看" + this.title;
          }
        }
      }
    },
  },
  watch: {
    $route() {
      this.flushPage();
    },
  },
  mounted() {
    this.flushPage();
  },
  beforeMount() {
    if (fake.self === null) {
      this.$route.back({
        name: "Recommend",
      });
    }
  },
};
</script>

<style scoped>
.index {
  background-color: skyblue;
}
strong {
  font-size: 20px;
}
span {
  font-size: 13px;
  color: rgba(2, 2, 2, 0.489);
}
#span-desc {
  color: #555666;
  font-size: 14px;
}
#span-num {
  font-weight: bolder;
  font-size: 20px;
  color: black;
}
.default {
  margin-top: 10px;
  background-color: white;
}
.hover {
  background-color: white;
  transition: all 0.5s;
}
.hover:hover {
  background-color: rgb(245, 245, 245);
  transition: all 0.5s;
}
</style>